<template>
  <page-layout>
    <template v-slot:header>
      <el-button type="primary" size="small" @click="onSubmit('list',list)"
        >保存</el-button
      >
      <el-button type="info" size="small" @click="cancelEvt">取消</el-button>
    </template>
    <el-form label-width="100px" size="small" :rules="rules">
      <el-row>
        <!-- :xs="24" :sm="12" :md="6" :lg="6" :xl="4" -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4">
          <el-form-item label="商铺编码" prop="shop_id" readonly>
            <el-input
              placeholder="请输入商铺编码"
              v-model="list.shop_id"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :xl="4">
          <el-form-item label="商铺名字" prop="shop_name">
            <el-input
              placeholder="请输入店铺名字"
              v-model="list.shop_name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :xl="4">
          <el-form-item label="店长" readonly prop="manager">
            <el-input suffix-icon="el-icon-search" v-model="list.manager">
              <template #title>
                <el-button
                icon="el-icon-search"
                size="small"
                @click="mangerEvt = true"
              ></el-button>
              </template>
            </el-input>
            <!-- <span
              
            ></span> -->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="店员" readonly prop="clark">
            <el-input suffix-icon="el-icon-search" v-model="list.clark">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4">
          <el-form-item label="商铺经度" prop="lat" readonly>
            <el-input
              placeholder="请输入经营区域"
              v-model="list.lat"
            ></el-input>
          </el-form-item> </el-col
        ><el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4">
          <el-form-item label="商铺纬度" prop="lng" readonly>
            <el-input
              placeholder="请输入经营区域"
              v-model="list.lng"
            ></el-input>
          </el-form-item> </el-col
        ><el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4">
          <el-form-item label="经营区域" prop="area">
            <el-input
              placeholder="请输入经营区域"
              v-model="list.area"
            ></el-input>
          </el-form-item> </el-col
        ><el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4">
          <el-form-item label="详细地址" prop="address">
            <el-input
              placeholder="请输入详细地址"
              v-model="list.address"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input placeholder="请输入备注" v-model="list.remark">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog title="收货地址" :visible.sync="mangerEvt" 
    append-to-body>
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
          
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </page-layout>
</template>
<script>
import { shopStateApi } from "@/apis/shopApi";

export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      mangerEvt: false,
      list: {
        shop_id: "",
        shop_name: "",
        lng: "",
        lat: "",
        area: "",
        address: "",
        manager: "",
        clark: "",
        remark: "",
        state: 'Y',
      },
      rules: {
        shop_id: [
          { required: true, message: "请输入店铺编码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    let arr = [];
    arr = JSON.parse(localStorage.getItem("shop"));
    this.list = arr;
  },
  methods: {
    //保存
    async onSubmit(list,y) {
      // this.$refs[list].validate((valid)=>{
      //   if(valid){}else{
      //     console.log('提交错误')
      //     return false
      //   }
      // })
      let result = await shopStateApi(this.list);
      console.log("reslut", result);
      if(result.code===200){
        this.$message({
          message:'修改信息成功'
        })
        localStorage.removeItem('shop')
        this.list=[]
      }else{
        this.$message.error(`保存失败${result.message}`)
      }

    },
    // 取消
    cancelEvt() {
      this.$confirm("页面未保存, 是否取消编辑?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$router.push("/shop/list");
      });
    },
    // 选择店长
  },
};
</script>
